<template>
  <yd-layout class="listpage">
      <div class = "flex middle header">
        <router-link to="/" slot="left">
          <yd-navbar-back-icon></yd-navbar-back-icon>
        </router-link>
        <router-link to="#" tag="div" class="f1 search">
          <yd-icon name='search' size='.3rem'/>
          <span class="placeholder">公益商城</span>
        </router-link>
      </div>
    <div class="tabs">
      <yd-tab v-model = "activeType">
        <yd-tab-panel :label="item" v-for = "(item, index) in tabLi" :key = "index">
          <yd-list>
            <yd-list-item v-for = "(item, key ) in commLi" :key = "key" type = "link" :href = "`/commdetail`">
              <div slot="img">
                <box :bgImg = "item.imgSrc"></box>
              </div>
              <h3 class="list-title" slot="title">{{ item.title }}</h3>
              <yd-list-other slot="other">
                <div>
                  <span class="list-price"><em>¥</em>34.7</span>
                  <span class="list-del-price">¥45.65</span>
                </div>
              </yd-list-other>
            </yd-list-item>
          </yd-list>
        </yd-tab-panel>
      </yd-tab>
    </div>
  </yd-layout>
</template>
<script>
export default {
  name: 'listpage',
  data () {
    return {
      activeType: 0,
      commLi: [],
      tabLi: ['综合', '销量', '价格', '筛选']
    }
  },
  watch: {
    activeType: {
      immediate: true,
      handler (val) {
        this.init(val)
      }
    }
  },
  methods: {
    init (val) {
      this.commLi = [{
        title: '旬邑苹果',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        capacity: '80-85mm12枚  约6斤',
        price: '66.90',
        integral: '1000'
      }, {
        title: '旬邑苹果',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        capacity: '80-85mm12枚  约6斤',
        price: '66.90',
        integral: '1000'
      }, {
        title: '旬邑苹果',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        capacity: '80-85mm12枚  约6斤',
        price: '66.90',
        integral: '1000'
      }, {
        title: '旬邑苹果',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        capacity: '80-85mm12枚  约6斤',
        price: '66.90',
        integral: '1000'
      }, {
        title: '旬邑苹果',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        capacity: '80-85mm12枚  约6斤',
        price: '66.90',
        integral: '1000'
      }, {
        title: '旬邑苹果',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        capacity: '80-85mm12枚  约6斤',
        price: '66.90',
        integral: '1000'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .listpage {
    .header {
      padding: .2rem .2rem 0 .2rem;
      box-sizing: border-box;
      background: #FFf;
      .yd-navbar {
        background-color: #f5f5f5;
        height: 0.8rem;
      }
      .search {
        border: 0.02rem solid #f5f5f5;
        background-color: #fff;
        border-radius: 1em;
        padding: .1rem 1em;
        margin-left: .2rem;
        .placeholder {
          color: #999;
          margin-left: 1em;
        }
      }
    }
    .tabs {
      /deep/ .yd-list-img{
        height: auto;
        padding: 0;
      }
    }
  }
</style>
